<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <meta
    http-equiv="X-UA-Compatible"
    content="ie=edge"
  >
  <title>Document</title>
  <link
    rel="stylesheet"
    href="index.css"
  >
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <div
      ref="form"
      :model="questionsListAll"
      label-width="80px"
    >
      <div class="question-con">
        <h3 class="question-title">{{questionsListAll.title}}</h3>
        <div class="question-describe">{{questionsListAll.describe}}</div>
      </div>
      <div
        v-for="(questions,index) in questionsListAll.questions"
        :key="questions.id"
      >
        <div v-if="questions.type==0">
          <label for="">{{index+1}}&nbsp;&nbsp;{{questions.title}}</label>
          <input v-model="questions.input"></input>
        </div>
        <div v-else-if="questions.type==2">
          <div>
            <label for="">{{index+1}}&nbsp;&nbsp;{{questions.title}}</label>
            <div v-for="answer in questions.answerInfo.answer">
              <input
                type="checkbox"
                :label="answer.title"
                :key="answer.id"
                name="type"
              ></input>
              <label for="">{{answer.title}}</label>
            </div>
          </div>
        </div>
        <div
          v-else-if="questions.type==1"
          :label="questions.title"
        >
          <div>
            <label for="">{{index+1}}&nbsp;&nbsp;{{questions.title}}</label>
            <div v-for="answer in questions.answerInfo.answer">

              <input
                :key="answer.id"
                type="radio"
              ></input>
              <label for="">{{answer.title}}</label>
            </div>

          </div>
        </div>
      </div>
      <!-- <el-form-item style="text-align: center;">
        <el-button
          type="primary"
          @click="onSubmit('提交')"
        >提交</el-button>
        <el-button>取消</el-button>
      </el-form-item> -->
    </div>
  </div>

  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          questionsListAll: {
            "createtime": 1540350039782,
            "openSort": true,
            "isTemplatePublish": 0,
            "questions": [{
              "locationinput": "questions[0].input",
              "answerInfo": {
                "answer": [{
                  "input": "",
                  "locationinput": "questions[0].answerInfo.answer[0].input",
                  "locationdescribe": "questions[0].answerInfo.answer[0].describe",
                  "name": "",
                  "ischecked": 0,
                  "describe": "",
                  "type": 0,
                  "title": "",
                  "content": "",
                  "locationtitle": "questions[0].answerInfo.answer[0].title",
                  "locationcontent": "questions[0].answerInfo.answer[0].content"
                }, {
                  "input": "",
                  "locationinput": "questions[0].answerInfo.answer[1].input",
                  "locationdescribe": "questions[0].answerInfo.answer[1].describe",
                  "name": "",
                  "ischecked": 0,
                  "describe": "",
                  "type": 0,
                  "title": "",
                  "content": "",
                  "locationtitle": "questions[0].answerInfo.answer[1].title",
                  "locationcontent": "questions[0].answerInfo.answer[1].content"
                }],
                "ischeckedid": [],
                "checkedlocation": "questions[0].answerInfo.ischeckedid"
              },
              "writeOr": 0,
              "type": 0,
              "title": "填空题1",
              "locationtitle": "questions[0].title",
              "input": "第一题答案",
              "locationdescribe": "questions[0].describe",
              "name": "a0",
              "id": 0,
              "describe": "",
              "class": "icon-tiankongti",
              "locationcontent": "questions[0].content"
            }, {
              "locationinput": "questions[1].input",
              "answerInfo": {
                "answer": [{
                  "input": "",
                  "locationinput": "questions[1].answerInfo.answer[0].input",
                  "locationdescribe": "questions[1].answerInfo.answer[0].describe",
                  "name": "",
                  "ischecked": 0,
                  "describe": "",
                  "type": 0,
                  "title": "",
                  "content": "",
                  "locationtitle": "questions[1].answerInfo.answer[0].title",
                  "locationcontent": "questions[1].answerInfo.answer[0].content"
                }, {
                  "input": "",
                  "locationinput": "questions[1].answerInfo.answer[1].input",
                  "locationdescribe": "questions[1].answerInfo.answer[1].describe",
                  "name": "",
                  "ischecked": 0,
                  "describe": "",
                  "type": 0,
                  "title": "",
                  "content": "",
                  "locationtitle": "questions[1].answerInfo.answer[1].title",
                  "locationcontent": "questions[1].answerInfo.answer[1].content"
                }],
                "ischeckedid": [],
                "checkedlocation": "questions[1].answerInfo.ischeckedid"
              },
              "writeOr": 0,
              "type": 0,
              "title": "填空题2",
              "locationtitle": "questions[1].title",
              "input": "第二题2",
              "locationdescribe": "questions[1].describe",
              "name": "a0",
              "id": 0,
              "describe": "",
              "class": "icon-tiankongti",
              "locationcontent": "questions[1].content"
            }, {
              "locationinput": "questions[2].input",
              "answerInfo": {
                "answer": [{
                  "input": "",
                  "locationinput": "questions[2].answerInfo.answer[0].input",
                  "locationdescribe": "questions[2].answerInfo.answer[0].describe",
                  "name": "",
                  "ischecked": 0,
                  "id": 7,
                  "describe": "",
                  "type": 0,
                  "title": "选项一",
                  "content": "",
                  "locationtitle": "questions[2].answerInfo.answer[0].title",
                  "locationcontent": "questions[2].answerInfo.answer[0].content"
                }, {
                  "input": "",
                  "locationinput": "questions[2].answerInfo.answer[1].input",
                  "locationdescribe": "questions[2].answerInfo.answer[1].describe",
                  "name": "",
                  "ischecked": 0,
                  "describe": "",
                  "type": 0,
                  "title": "选项二",
                  "content": "",
                  "locationtitle": "questions[2].answerInfo.answer[1].title",
                  "locationcontent": "questions[2].answerInfo.answer[1].content"
                }],
                "ischeckedid": [],
                "checkedlocation": "questions[2].answerInfo.ischeckedid"
              },
              "writeOr": 0,
              "type": 1,
              "title": "单选题",
              "locationtitle": "questions[2].title",
              "a0": "a0",
              "input": "",
              "locationdescribe": "questions[2].describe",
              "name": "a0",
              "id": 1,
              "describe": "",
              "class": "icon-danxuanti",
              "locationcontent": "questions[2].content"
            }, {
              "locationinput": "questions[3].input",
              "answerInfo": {
                "answer": [{
                  "input": "",
                  "locationinput": "questions[3].answerInfo.answer[0].input",
                  "locationdescribe": "questions[3].answerInfo.answer[0].describe",
                  "name": "",
                  "ischecked": 0,
                  "id": 10,
                  "describe": "",
                  "type": 0,
                  "title": "选项一",
                  "content": "",
                  "locationtitle": "questions[3].answerInfo.answer[0].title",
                  "locationcontent": "questions[3].answerInfo.answer[0].content"
                }, {
                  "input": "",
                  "locationinput": "questions[3].answerInfo.answer[1].input",
                  "locationdescribe": "questions[3].answerInfo.answer[1].describe",
                  "name": "",
                  "ischecked": 0,
                  "id": 11,
                  "describe": "",
                  "type": 0,
                  "title": "选项二",
                  "content": "",
                  "locationtitle": "questions[3].answerInfo.answer[1].title",
                  "locationcontent": "questions[3].answerInfo.answer[1].content"
                }],
                "ischeckedid": [],
                "checkedlocation": "questions[3].answerInfo.ischeckedid"
              },
              "writeOr": 0,
              "type": 2,
              "title": "多选题",
              "locationtitle": "questions[3].title",
              "input": "",
              "locationdescribe": "questions[3].describe",
              "name": "a0",
              "id": 4,
              "describe": "",
              "class": "icon-xuanze",
              "locationcontent": "questions[3].content"
            }],
            "orderBy": "createtime",
            "title": "问卷1",
            "version": "v1.0",
            "updatername": "",
            "current": 1,
            "size": 20,
            "name": "",
            "startNum": 0,
            "modulename": "sc_surgical_record",
            "describe": "说明",
            "id": "",
            "tablename": "sc_surgical_record",
            "updatetime": 1542425191754,
            "creatername": "",
            "open": "isTemplatePublish",
            "isComplete": 1
          }
        }
      },
      methods: {
        onSubmit(msg) {
          let $this = this;
          $this.questionsListAll.isComplete = 0;
          $this.$http.post("http://10.100.1.145/knbbusiness/business/insert", $this.questionsListAll).then(function (
            res) {
            if (res.data.code == 0) {
              $this.questionsListAll = res.data.data;
              $this.$message.success(msg + "成功");
            } else {
              $this.$message.error(msg + "失败");
            }
          });
        },
      }
    })
  </script>
</body>

</html>